<template>
  <div :class="['home-container full-box', hasVideoBackground ? '' : 'no-mp4']">
    <div class="bg">
      <video
        class="video"
        src="/video/dark-bg.mp4"
        autoplay
        muted
        loop
      />
    </div>
    <div class="topbg" />
    <div class="stars" />
    <div class="topbg-nomp4" />
    <div class="buttons d-flex m-r-mini">
      <OnlineCount style="color: #89c4dd;margin-right: -10px;" />
      <el-dropdown
        @command="handleCommand"
      >
        <div
          class="username c-pointer d-flex ai-c f-17"
        >
          <i
            style="color: #89c4dd;"
            class="el-icon-user-solid m-r-mini"
          />
          <span style="color: #89c4dd;">{{ username }}</span>
        </div>
        <el-dropdown-menu
          class="no-padding"
          slot="dropdown"
        >
          <el-dropdown-item command="logout">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-popover
        placement="bottom"
        trigger="hover"
      >
        <img
          class="img img-mobile"
          src="@/assets/images/hbsw/mobile.png"
          alt=""
          slot="reference"
        >
        <div>
          <img
            src="/mobile-qrcode.png"
            style="width: 160px;"
          >
          <div class="ta-c">
            扫码下载移动端应用
          </div>
        </div>
      </el-popover>

      <!-- <img
        class="img img-theme"
        src="@/assets/images/hbsw/theme.png"
        alt=""
      > -->
      <el-tooltip
        class="item"
        effect="dark"
        content="统一权限管理系统"
        placement="bottom"
      >
        <img
          class="img img-toAuth"
          src="@/assets/images/hbsw/toAuth.png"
          alt=""
          @click="toOtherPage('/#/ysqjc/system/user')"
        >
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="工作平台"
        placement="bottom"
      >
        <img
          class="img img-toOther"
          src="@/assets/images/hbsw/toOther.png"
          alt=""
          @click="toOtherPage('/#/ysqgzt')"
        >
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="页面设置"
        placement="bottom"
      >
        <img
          class="img img-setting"
          src="@/assets/images/hbsw/setting.png"
          alt=""
          @click="openDrawer"
        >
      </el-tooltip>
    </div>
    <div class="bodyes">
      <div class="dtogr" />
      <div class="z-container absolute-container">
        <div class="zjiag">
          <div class="gz_rotate">
            <img
              class="first-circle"
              src="@/assets/images/hbsw/wzt_1.png"
              alt=""
            >
            <img
              class="second-circle"
              src="@/assets/images/hbsw/wzt_2.png"
              alt=""
            >
          </div>
          <div
            class="bntt left_btn"
            ref="leftBtn"
          />
          <div
            class="bntt right_btn"
            ref="rightBtn"
          />
          <div id="ball-wrap">
            <div
              id="showcase"
              class="noselect"
              v-if="show"
            >
              <p
                v-for="(item, i) in list"
                :key="i"
                :id="'nav_' + i"
                class="cloud9-item tips dp"
                @click="toOtherPage(item.web_url)"
              >
                <span>{{ item.name }}</span>
                <em>{{ item.intro }}</em>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import { createCloudCarousel } from '../../animate/animate.js'
import '../../lib/stopExecutionOnTimeout'
import starPlay from '../../animate/stars'
import { mapState, mapActions } from 'vuex'
import { debounce } from 'throttle-debounce'
import OnlineCount from '@/components/online-count'

export default {
  name: 'Sphere',
  components: {
    OnlineCount
  },
  data () {
    return {
      hasVideoBackground: true,
      list: [],
      show: true,
      loaded: true
    }
  },
  computed: {
    ...mapState('user', ['username'])
  },
  created () {
    this.debounceRunAnimate = debounce(50, this.runAnimate)
  },
  mounted () {
    this.fetchList()
    starPlay()
  },
  beforeDestroy () {
    window.clearInterval(this.setIntervalDom)
    this.setIntervalDom = null
    this.totalNum = null
    document.removeEventListener('mousewheel', this.handleMouseWheel)
  },
  methods: {
    ...mapActions('user', ['logout']),
    setAnimate () {
      const showcase = $('#showcase')
      showcase.css('visibility', 'hidden')
      createCloudCarousel(showcase, {
        xRadius: 680,
        yRadius: 205,
        mirrorOptions: {
          gap: 14,
          height: 0.2
        },
        itemClass: 'cloud9-item',
        buttonLeft: $('.left_btn'),
        buttonRight: $('.right_btn'),
        autoPlay: true,
        bringToFront: true,
        onRendered: this.showcaseUpdated,
        onLoaded: function () {
          showcase.css('visibility', 'visible')
          showcase.css('display', 'none')
          showcase.fadeIn(1500)
        }
      })

      this.setIntervalDom = self.setInterval(function () {
        if (this.totalNum) this.totalNum = this.list.length
        $('#nav_' + this.totalNum).click()
      }, 2000)
      $('.cloud9-item').mouseover(function () {
        if (this.setIntervalDom) window.clearInterval(this.setIntervalDom)
      }).mouseout(function () {
        this.setIntervalDom = self.setInterval(function () {
          if (this.totalNum) this.totalNum = this.list.length
          $('#nav_' + this.totalNum).click()
        }, 2000)
      }).click(function (e) {
        var id = $(this)[0].id
        $('#item-title .nav').hide().css({
          top: '90%'
          // opacity: '0'
        })
        $('#item-title .nav#cont_2').show().animate({
          // top: toph,
          opacity: '1'
        })
        this.totalNum = id.replace('nav_', '') - 1
      })
      this.startMouseWheelListener()
    },
    showcaseUpdated (showcase) {
      var title = $('#item-title').html(
        $(showcase.nearestItem()).attr('alt')
      )
      var c = Math.cos((showcase.floatIndex() % 1) * 2 * Math.PI)
      title.css('opacity', 0.5 + (0.5 * c))
    },
    async toOtherPage (url) {
      const data = await this.$request.get('/test')
      if (data) {
        window.open(url)
      }
    },
    openDrawer () {
      this.$emit('openDrawer')
    },
    updateList (list) {
      this.show = false
      this.list = list.reverse()
      this.$nextTick(() => {
        if (this.setIntervalDom) {
          window.clearInterval(this.setIntervalDom)
          this.setIntervalDom = null
          this.totalNum = null
        }
        this.show = true
        this.$nextTick(() => {
          this.setAnimate()
        })
      })
    },
    async fetchList () {
      this.show = false
      const data = await this.$request.post('/ysjc/zhzs/getuserclient', { appId: 'YSJC', bzCode: 'YSJC', IS_VALID: '1' })
      this.list = data.reverse()
      this.remoteList = data
      this.$nextTick(() => {
        if (this.setIntervalDom) {
          window.clearInterval(this.setIntervalDom)
          this.setIntervalDom = null
          this.totalNum = null
        }
        this.show = true
        this.$nextTick(() => {
          this.setAnimate()
        })
      })
    },
    restoreList () {
      if (!this.remoteList) return
      this.show = false
      this.list = [...this.remoteList].reverse()
      this.$nextTick(() => {
        if (this.setIntervalDom) {
          window.clearInterval(this.setIntervalDom)
          this.setIntervalDom = null
          this.totalNum = null
        }
        this.show = true
        this.$nextTick(() => {
          this.setAnimate()
        })
      })
    },
    handleCommand (c) {
      if (c === 'logout') {
        this.logout()
      }
    },
    startMouseWheelListener () {
      document.removeEventListener('mousewheel', this.handleMouseWheel)
      document.addEventListener('mousewheel', this.handleMouseWheel)
    },
    handleMouseWheel ({ deltaY }) {
      if (this.setIntervalDom) window.clearInterval(this.setIntervalDom)
      if (deltaY > 0) {
        this.$refs.rightBtn.click()
      } else if (deltaY < 0) {
        this.$refs.leftBtn.click()
      }
    },
    runAnimate () {
      this.setIntervalDom = self.setInterval(function () {
        if (this.totalNum) this.totalNum = this.list.length
        $('#nav_' + this.totalNum).click()
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../animate/animation.css";

@font-face {
  font-family: YOUSHEBIAOTIHEI;
  src: url("/fonts/YOUSHEBIAOTIHEI-2.TTF");
}

.home-container {
  z-index: 1;
  background-color: #012535;

  .bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;

    .video {
      position: absolute;
      z-index: 8;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      mix-blend-mode: screen;
      object-fit: fill;
    }
  }

  .topbg {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgb(1 37 53), rgb(1 25 34 / 30%)) !important;
  }

  .stars {
    display: none;
    transform: perspective(500px);
    transform-style: preserve-3d;
    position: absolute;
    perspective-origin: 50% 100%;
    left: 50%;
    animation: rotate 90s infinite linear;
    margin-top: 560px;
    z-index: 99;
  }

  .topbg-nomp4 {
    display: none;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: url("~@/assets/images/hbsw/bg9.jpg") no-repeat;
    background-size: 100% 100%;
  }

  .bodyes {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;

    .dtogr {
      width: 100%;
      background: url("~@/assets/images/hbsw/logo.png") no-repeat center top;
      background-size: auto 100%;
      position: absolute;
      z-index: 18;
      height: 20%;
      top: 0%;
      animation: fadeDown 1s 1 both ease-in-out;
    }

    .zjiag {
      position: absolute;
      height: 710px;
      width: 100%;
      z-index: 12;
      background: url("~@/assets/images/hbsw/dizuo.png") no-repeat center top;
      bottom: -40px;
      animation: fade-up 1s 1 both ease-in-out;

      &::before {
        position: absolute;
        left: -12px;
        right: 0;
        top: 0;
        margin: auto;
        z-index: 99;
        width: 820px;
        height: 600px;
        display: block;
        content: "";
        background: url("~@/assets/images/hbsw/diqiu.png");
        background-size: 100% auto;
        margin-top: -100px;
        animation: bounce-down 1.6s linear infinite;
      }

      .gz_rotate {
        position: absolute;
        left: 50%;
        top: 250px;
        margin-left: -107px;
        width: 200px;
        height: 200px;
        transform: scale(3, 0.73);
        user-select: none;

        .first-circle,
        .second-circle {
          width: auto;
          height: 100%;
          position: absolute;
        }

        .first-circle {
          animation: my-rotate 15s linear infinite;
        }

        .second-circle {
          animation: my-rotate-reverse 20s linear infinite;
        }
      }

      .left_btn {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -710px;
        margin-top: -10px;
        width: 24px;
        height: 50px;
        z-index: 99;
        background: #013a5654 url("~@/assets/images/hbsw/left.png") no-repeat center;
        background-size: 50% auto;
      }

      .right_btn {
        position: absolute;
        right: 50%;
        top: 50%;
        margin-right: -710px;
        margin-top: -10px;
        width: 24px;
        height: 50px;
        z-index: 199;
        background: #013a5654 url("~@/assets/images/hbsw/right.png") no-repeat center;
        background-size: 50% auto;
      }

      .bntt {
        border-radius: 12px;
        border: 1px solid #0178c7b8;
        display: none;
      }

      &:hover {
        .bntt:hover {
          border: 1px solid #0178c7;
          cursor: pointer;
          background-color: #013a56;
          opacity: 1;
        }

        .bntt {
          display: block;
          opacity: 0.5;
        }
      }

      #ball-wrap {
        width: 960px;
        height: 500px;
        left: 50%;
        transform: translate(-50%, 0%);
        position: absolute;
        bottom: 80px;
        z-index: 120;

        #showcase {
          width: 100%;
          height: 450px;
          background-color: transparent;
          overflow: visible !important;

          > img,
          p {
            cursor: pointer;
          }

          > p {
            background: url("~@/assets/images/hbsw/qiu.png") no-repeat center;
            background-size: contain;
            width: 140px;
            height: 140px;
            padding: 0;
            font-size: 12px;
            line-height: 30px;
            color: #fff;
            text-align: center;
            display: flex !important;
            align-items: center;
            justify-content: center;
            margin-top: 40px;

            .tips,
            .tips:hover {
              background: url("~@/assets/images/hbsw/qiu_h.png") no-repeat center;
              background-size: contain;
              color: #fff;
              text-shadow: 1px 1px 6px #0f17c3;
              width: 120px;
              height: 120px;
              opacity: 1;

              > span {
                font-size: 24px;
              }
            }

            > em {
              display: none;
              position: absolute;
              left: 50%;
              bottom: -50px;
              width: auto;
              z-index: 99;
              border-radius: 20px;
              padding: 0 16px;
              background-color: #011822bd;
              border: 1px #0bc1c3 solid;
              font-style: normal;
              color: #fff;
              font-size: 14px;
              white-space: nowrap;
            }

            &:hover {
              background: url("~@/assets/images/hbsw/qiu_h.png") no-repeat center;
              background-size: contain;

              > em {
                display: block;
                transform: translate(-50%, 0%);
              }
            }

            > span {
              font-size: 26px;
              line-height: 1;
              width: 100px;
              font-family: YOUSHEBIAOTIHEI, serif;
            }
          }
        }
      }
    }

    @media only screen and (min-width: 1920px) {
      .z-container {
        transform: scale(1);

        .zjiag {
          background: url("~@/assets/images/hbsw/dizuo2.png") no-repeat center top;
          bottom: 0 !important;
          background-size: 130%;
        }
      }

      .dtogr {
        height: 189px;
        top: 0%;
      }
    }

    @media only screen and (min-width: 2100px) {
      .z-container {
        transform: scale(1.2);

        .zjiag {
          background: url("~@/assets/images/hbsw/dizuo.png") no-repeat center top;
          bottom: 100px !important;
          background-size: 110%;
          height: 740px;
        }

        &#ball-wrap {
          bottom: 210px;
        }
      }

      .dtogr {
        height: 189px;
        top: 0%;
      }
    }

    @media only screen and (min-width: 2558px) {
      .z-container {
        transform: scale(1.3);

        .zjiag {
          bottom: 10%;
          background-size: 100%;
          height: 740px;
        }
      }

      .dtogr {
        height: 18%;
        top: 1%;
      }
    }

    @media only screen and (min-width: 3840px) {
      .z-container {
        transform: scale(1.8);

        .zjiag {
          bottom: 22% !important;
          background-size: 70%;
          height: 760px;
        }
      }
    }
  }

  .buttons {
    position: absolute;
    right: 15px;
    top: 24px;
    z-index: 9;
    gap: 24px;

    .img {
      cursor: pointer;
    }

    .img-mobile {
      width: 12px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/mobile-hover.png");
      }
    }

    .img-theme {
      width: 20px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/theme-hover.png");
      }
    }

    .img-toAuth {
      width: 16px;
      height: 20px;

      &:hover {
        content: url("~@/assets/images/hbsw/toAuth-hover.png");
      }
    }

    .img-toOther {
      width: 21px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/toOther-hover.png");
      }
    }

    .img-setting {
      width: 20px;
      height: 19px;

      &:hover {
        content: url("~@/assets/images/hbsw/setting-hover.png");
      }
    }
  }
}

.home-container.no-mp4 {
  .bg { display: none; }
  .topbg-nomp4 { display: block; }
  .stars { display: block; }

  .bodyes .zjiag {
    background: url("~@/assets/images/hbsw/dizuo2.png") no-repeat center top;
  }
}

.z-container {
  transform: scale(0.8);

  .zjiag {
    bottom: -20% !important;
  }
}

.noselect {
  user-select: none;
}
</style>

<style lang="scss">
  .stars .star {
    width: 1.5px;
    height: 1.5px;
    background: #0c97e3;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0 -300px;
    transform: translate3d(0, 0, -300px);
    backface-visibility: hidden;
    z-index: 99;
  }
</style>
